function DragEle(ele) {
        this.target = ele;
}

DragEle.prototype.init = function () {
    this.dragStart();
    this.randColor();
}
DragEle.prototype.dragStart = function () {
    // var _this = this;
    this.target.onmousedown = e => {
        var e = e || window.event;
        var posX = e.offsetX;
        var posY = e.offsetY;
        this.posX = posX;
        this.posY = posY;
        this.dragMove();
        this.dragEnd();
    }
}
DragEle.prototype.dragMove = function () {
    var _this = this;
    document.onmousemove = function (e) {
        var e = e || window.event;
        var x = e.pageX - _this.posX;
        var y = e.pageY - _this.posY;
        if (x < 0) x = 0;
        if (y < 0) y = 0;
        if (x > maxLeft) x = maxLeft;
        if (y > maxTop) y = maxTop;
        _this.target.style.left = x + "px";
        _this.target.style.top = y + "px";
    }
}
DragEle.prototype.dragEnd =  () =>{
    document.onmouseup = function () {
        document.onmousemove = null;
    }
}
DragEle.prototype.randColor = function () {
    var str = "0123456789abcdef";
    var colorStr = "#";
    for (var i = 0; i < 6; i++) {
        var index = Math.floor(Math.random() * str.length);
        var char = str.charAt(index);
        colorStr += char;
    }
    this.target.style.backgroundColor = colorStr;
}
